.bubble {
  @apply flex flex-col;

  .content {
    @apply flex items-center;
    &:hover {
      .shape .actions {
        @apply block;
      }
    }
    .shape {
      @apply rounded-2xl px-4 py-3;
      .icon {
        @apply inline-flex w-4 h-4 mr-1;
        background: url(./assets/heart_label.svg) no-repeat no-repeat;
        background-size: contain;
      }
      .actions {
        @apply absolute h-8 hidden;
        top: -16px;
        right: -8px;
      }
    }
    &.mine {
      @apply flex-row-reverse;
      .shape {
        @apply rounded-tr-none bg-[#D1E9FF80] relative;
        &::before {
          content: '';
          @apply absolute w-4 h-4;
          top: 0;
          right: -16px;
          background: url(./assets/right.svg) no-repeat;
        }
      }
    }
    &.other {
      @apply relative flex-row;
      .shape {
        @apply rounded-tl-none bg-gray-100 relative;
        &::before {
          top: 0;
          left: -8px;
          content: '';
          @apply absolute w-4 h-4;
          background: url(./assets/left.svg) no-repeat;
        }
      }
    }
  }
}
.avatar {
  @apply inline-flex items-center justify-center w-10 h-10 rounded-full bg-gray-200 shrink-0 mx-2 self-start;
  &.mine {
    background: url(./assets/avatar.svg) no-repeat;
    background-size: contain;
  }
}
